<template>
  <div class="min-h-screen px-4 py-8 sm:px-6 lg:px-8 transition-colors duration-500" :class="isDarkMode ? 'bg-gray-900 text-gray-200' : 'bg-gray-50'">
    <div class="max-w-4xl mx-auto">
      <!-- 页面标题 -->
      <div class="mb-8 animate-fade-in-up" style="--delay: 200ms;">
        <button 
          @click="router.push('/home')" 
          class="mb-4 flex items-center transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-spring"
          :class="isDarkMode ? 'text-purple-300 hover:text-purple-200' : 'text-purple-600 hover:text-purple-500'"
        >
          <font-awesome-icon icon="arrow-left" class="mr-2 transition-transform duration-300 hover:translate-x-[-3px]" />
          <span>返回主页</span>
        </button>
        <h1 class="text-2xl font-bold bg-gradient-to-r bg-clip-text animate-gradient-x"
            :class="isDarkMode ? 'from-purple-400 to-green-300 text-transparent' : 'from-purple-600 to-green-500 text-transparent'">
          个人中心
        </h1>
        <p class="mt-1" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'">管理您的个人资料和账户设置</p>
      </div>
      
      <!-- 主要内容 -->
      <div class="space-y-6">
        <!-- 个人资料卡片 -->
        <div class="animate-fade-in-up" style="--delay: 300ms;">
          <ProfileCard 
            :user="userStore.user" 
            @edit-profile="openEditProfile"
            @change-password="showChangePasswordModal = true"
            :isDarkMode="isDarkMode"
          />
        </div>
        
        <!-- 更多设置 -->
        <div class="rounded-xl shadow-md overflow-hidden transition-all duration-500 transform hover:shadow-lg animate-fade-in-up hover-3d hover:scale-[1.01]" 
             :class="isDarkMode ? 'bg-gray-800 divide-y divide-gray-700' : 'bg-white divide-y divide-gray-200'"
             style="--delay: 400ms;">
          <!-- 账号安全 -->
          <div class="p-6">
            <h3 class="text-lg font-medium mb-4 bg-gradient-to-r bg-clip-text"
                :class="isDarkMode ? 'from-purple-400 to-green-300 text-transparent' : 'from-purple-600 to-green-500 text-transparent'">
              账号安全
            </h3>
            <div class="space-y-3">
              <div class="flex items-center justify-between p-3 rounded-lg transition-all duration-300 hover:scale-[1.02]"
                   :class="isDarkMode ? 'hover:bg-gray-700/60' : 'hover:bg-gray-50/80'">
                <div>
                  <p class="text-sm font-medium" :class="isDarkMode ? 'text-gray-200' : 'text-gray-800'">双因素认证</p>
                  <p class="text-xs" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'">启用后将增强账号安全性</p>
                </div>
                <div class="relative inline-block w-12 mr-2 align-middle">
                  <input 
                    type="checkbox" 
                    id="twoFactor" 
                    v-model="settings.twoFactor" 
                    class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer"
                    :class="{ 'translate-x-full border-purple-500': settings.twoFactor, 'border-gray-300': !isDarkMode, 'border-gray-600': isDarkMode && !settings.twoFactor }"
                  />
                  <label 
                    for="twoFactor" 
                    class="toggle-label block overflow-hidden h-5 rounded-full cursor-pointer transition-colors duration-300 ease-spring"
                    :class="{ 
                      'bg-gradient-to-r from-purple-500 to-green-400': settings.twoFactor, 
                      'bg-gray-300': !settings.twoFactor && !isDarkMode,
                      'bg-gray-600': !settings.twoFactor && isDarkMode
                    }"
                  ></label>
                </div>
              </div>
              
              <div class="flex items-center justify-between p-3 rounded-lg transition-all duration-300 hover:scale-[1.02]"
                   :class="isDarkMode ? 'hover:bg-gray-700/60' : 'hover:bg-gray-50/80'">
                <div>
                  <p class="text-sm font-medium" :class="isDarkMode ? 'text-gray-200' : 'text-gray-800'">登录通知</p>
                  <p class="text-xs" :class="isDarkMode ? 'text-gray-400' : 'text-gray-500'">有新设备登录时通知您</p>
                </div>
                <div class="relative inline-block w-12 mr-2 align-middle">
                  <input 
                    type="checkbox" 
                    id="loginNotification" 
                    v-model="settings.loginNotification" 
                    class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer"
                    :class="{ 'translate-x-full border-purple-500': settings.loginNotification, 'border-gray-300': !isDarkMode, 'border-gray-600': isDarkMode && !settings.loginNotification }"
                  />
                  <label 
                    for="loginNotification" 
                    class="toggle-label block overflow-hidden h-5 rounded-full cursor-pointer transition-colors duration-300 ease-spring"
                    :class="{ 
                      'bg-gradient-to-r from-purple-500 to-green-400': settings.loginNotification, 
                      'bg-gray-300': !settings.loginNotification && !isDarkMode,
                      'bg-gray-600': !settings.loginNotification && isDarkMode
                    }"
                  ></label>
                </div>
              </div>
            </div>
          </div>
          <!-- 高级选项 -->
          <div class="p-6">
            <h3 class="text-lg font-medium mb-4 bg-gradient-to-r bg-clip-text"
                :class="isDarkMode ? 'from-purple-400 to-green-300 text-transparent' : 'from-purple-600 to-green-500 text-transparent'">
              高级选项
            </h3>
            <button 
              @click="showDeleteAccountConfirm = true"
              class="px-4 py-2 rounded-md transition-all duration-300 flex items-center transform hover:scale-105 active:scale-95 ease-spring btn-ripple overflow-hidden"
              :class="isDarkMode ? 'bg-red-900/30 text-red-400 hover:bg-red-800/40' : 'bg-red-50 text-red-600 hover:bg-red-100'"
            >
              <font-awesome-icon icon="trash" class="mr-2 transition-transform duration-300 group-hover:rotate-12" />
              删除账户
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑资料模态框 -->
    <div v-if="showEditProfileModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-scale-in"
             :class="isDarkMode ? 'bg-gray-800' : 'bg-white'">
          <div class="relative px-4 pt-5 pb-4 sm:p-6 sm:pb-4 overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-purple-500/10 mix-blend-overlay"></div>
            <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-green-500/10 mix-blend-overlay"></div>
            
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full relative z-10">
                <h3 class="text-lg leading-6 font-medium mb-4 bg-gradient-to-r from-purple-500 to-green-400 bg-clip-text text-transparent">编辑个人资料</h3>
                <div class="space-y-4">
                  <div class="group/input">
                    <label for="username" class="block text-sm font-medium" :class="isDarkMode ? 'text-gray-300' : 'text-gray-700'">用户名</label>
                    <input type="text" id="username" v-model="editProfileForm.username" 
                           class="mt-1 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm transition-all duration-300 group-hover/input:shadow-md"
                           :class="isDarkMode 
                             ? 'bg-gray-700 border-gray-600 text-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30' 
                             : 'border-gray-300 text-gray-700 bg-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20'">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse relative z-10" :class="isDarkMode ? 'bg-gray-700' : 'bg-gray-50'">
            <button 
              @click="saveProfile" 
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm transition-all duration-300 transform hover:scale-105 active:scale-95 ease-spring bg-gradient-to-r"
              :class="isDarkMode 
                ? 'from-purple-600 to-green-500 hover:from-purple-700 hover:to-green-600' 
                : 'from-purple-500 to-green-400 hover:from-purple-600 hover:to-green-500'"
              :disabled="isUpdatingProfile"
            >
              <span v-if="isUpdatingProfile" class="mr-2">
                <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              </span>
              {{ isUpdatingProfile ? '保存中...' : '保存' }}
            </button>
            <button 
              @click="showEditProfileModal = false" 
              class="mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              :class="isDarkMode ? 'bg-gray-600 text-gray-200 border-gray-700 hover:bg-gray-500' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
              :disabled="isUpdatingProfile"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码模态框 -->
    <div v-if="showChangePasswordModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-scale-in"
             :class="isDarkMode ? 'bg-gray-800' : 'bg-white'">
          <div class="relative px-4 pt-5 pb-4 sm:p-6 sm:pb-4 overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-purple-500/10 mix-blend-overlay"></div>
            <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-green-500/10 mix-blend-overlay"></div>
            
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full relative z-10">
                <h3 class="text-lg leading-6 font-medium mb-4 bg-gradient-to-r from-purple-500 to-green-400 bg-clip-text text-transparent">修改密码</h3>
                <div class="space-y-4">
                  <div class="group/input">
                    <label for="currentPassword" class="block text-sm font-medium" :class="isDarkMode ? 'text-gray-300' : 'text-gray-700'">当前密码</label>
                    <input type="password" id="currentPassword" v-model="changePasswordForm.currentPassword" 
                           class="mt-1 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm transition-all duration-300 group-hover/input:shadow-md"
                           :class="isDarkMode 
                             ? 'bg-gray-700 border-gray-600 text-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30' 
                             : 'border-gray-300 text-gray-700 bg-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20'">
                  </div>
                  <div class="group/input">
                    <label for="newPassword" class="block text-sm font-medium" :class="isDarkMode ? 'text-gray-300' : 'text-gray-700'">新密码</label>
                    <input type="password" id="newPassword" v-model="changePasswordForm.newPassword" 
                           class="mt-1 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm transition-all duration-300 group-hover/input:shadow-md"
                           :class="isDarkMode 
                             ? 'bg-gray-700 border-gray-600 text-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30' 
                             : 'border-gray-300 text-gray-700 bg-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20'">
                  </div>
                  <div class="group/input">
                    <label for="confirmPassword" class="block text-sm font-medium" :class="isDarkMode ? 'text-gray-300' : 'text-gray-700'">确认新密码</label>
                    <input type="password" id="confirmPassword" v-model="changePasswordForm.confirmPassword" 
                           class="mt-1 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm transition-all duration-300 group-hover/input:shadow-md"
                           :class="isDarkMode 
                             ? 'bg-gray-700 border-gray-600 text-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/30' 
                             : 'border-gray-300 text-gray-700 bg-white focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20'">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse relative z-10" :class="isDarkMode ? 'bg-gray-700' : 'bg-gray-50'">
            <button 
              @click="changePassword" 
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm transition-all duration-300 transform hover:scale-105 active:scale-95 ease-spring bg-gradient-to-r btn-ripple"
              :class="isDarkMode 
                ? 'from-purple-600 to-green-500 hover:from-purple-700 hover:to-green-600' 
                : 'from-purple-500 to-green-400 hover:from-purple-600 hover:to-green-500'"
            >
              保存
            </button>
            <button 
              @click="showChangePasswordModal = false" 
              class="mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm focus:outline-none transition-all duration-300 transform hover:scale-105 active:scale-95 ease-spring btn-ripple"
              :class="isDarkMode ? 'bg-gray-600 text-gray-200 border-gray-700 hover:bg-gray-500' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除账户确认模态框 -->
    <div v-if="showDeleteAccountConfirm" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-scale-in"
             :class="isDarkMode ? 'bg-gray-800' : 'bg-white'">
          <div class="relative px-4 pt-5 pb-4 sm:p-6 sm:pb-4 overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-red-500/10 mix-blend-overlay"></div>
            <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-red-300/10 mix-blend-overlay"></div>
            
            <div class="sm:flex sm:items-start">
              <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 relative"
                   :class="isDarkMode ? 'bg-red-900' : 'bg-red-100'">
                <font-awesome-icon icon="exclamation" class="h-6 w-6 text-red-600 animate-pulse" />
                <div class="absolute inset-0 rounded-full bg-red-500/20 animate-ping opacity-75"></div>
              </div>
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left relative z-10">
                <h3 class="text-lg leading-6 font-medium" :class="isDarkMode ? 'text-white' : 'text-gray-900'">删除账户</h3>
                <div class="mt-2">
                  <p class="text-sm" :class="isDarkMode ? 'text-gray-300' : 'text-gray-500'">您确定要删除您的账户吗？此操作不可逆，所有数据将永久删除。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse relative z-10" :class="isDarkMode ? 'bg-gray-700' : 'bg-gray-50'">
            <button 
              @click="deleteAccount" 
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-base font-medium text-white hover:from-red-600 hover:to-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm transition-all duration-300 transform hover:scale-105 active:scale-95 ease-spring btn-ripple"
            >
              删除
            </button>
            <button 
              @click="showDeleteAccountConfirm = false" 
              class="mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm focus:outline-none transition-all duration-300 transform hover:scale-105 active:scale-95 ease-spring btn-ripple"
              :class="isDarkMode ? 'bg-gray-600 text-gray-200 border-gray-700 hover:bg-gray-500' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';
import ProfileCard from '../components/ProfileCard.vue';
import { toast } from '../services/toastService';
import { authAPI } from '../services/api';

const router = useRouter();
const userStore = useUserStore();

// 深色模式状态
const isDarkMode = ref(false);

// 从localStorage加载主题偏好
const loadThemePreference = () => {
  const savedPreference = localStorage.getItem('darkModePreference');
  if (savedPreference !== null) {
    isDarkMode.value = savedPreference === 'true';
  } else {
    // 如果没有保存的偏好，尝试使用系统偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    isDarkMode.value = prefersDark;
  }
};

// 组件挂载时加载主题设置
onMounted(() => {
  loadThemePreference();
});

// 用户设置
const settings = ref({
  twoFactor: false,
  loginNotification: true,
  dataSharing: true
});

// 模态框控制
const showEditProfileModal = ref(false);
const showChangePasswordModal = ref(false);
const showDeleteAccountConfirm = ref(false);

// 编辑资料表单
const editProfileForm = reactive({
  username: '',
  email: ''
});

// 加载状态
const isUpdatingProfile = ref(false);

// 修改密码表单
const changePasswordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 监听editProfile事件，打开编辑资料模态框并填充当前用户信息
const openEditProfile = () => {
  if (userStore.user) {
    editProfileForm.username = userStore.user.username || '';
    editProfileForm.email = userStore.user.email || '';
  }
  showEditProfileModal.value = true;
};

// 保存资料
const saveProfile = async () => {
  // 表单验证
  if (!editProfileForm.username) {
    toast.error('用户名不能为空');
    return;
  }
  
  // 如果用户名没变，直接关闭
  if (editProfileForm.username === userStore.user.username) {
    showEditProfileModal.value = false;
    return;
  }
  
  try {
    isUpdatingProfile.value = true;
    
    // 调用API更新用户名
    await authAPI.updateUsername(editProfileForm.username);
    
    // 更新本地存储的用户信息
    userStore.updateProfile({
      username: editProfileForm.username
    });
    
    // 显示成功消息
    toast.success('用户名已更新');
    showEditProfileModal.value = false;
  } catch (error) {
    console.error('更新用户名失败:', error);
    toast.error(error.message || '更新用户名失败，请稍后再试');
  } finally {
    isUpdatingProfile.value = false;
  }
};

// 修改密码
const changePassword = async () => {
  // 表单验证
  if (!changePasswordForm.currentPassword) {
    toast.error('请输入当前密码');
    return;
  }
  
  if (!changePasswordForm.newPassword) {
    toast.error('请输入新密码');
    return;
  }
  
  if (changePasswordForm.newPassword.length < 6) {
    toast.error('新密码长度不能少于6个字符');
    return;
  }
  
  if (changePasswordForm.newPassword !== changePasswordForm.confirmPassword) {
    toast.error('两次输入的密码不一致');
    return;
  }
  
  try {
    // 调用API修改密码
    await authAPI.changePassword({
      currentPassword: changePasswordForm.currentPassword,
      newPassword: changePasswordForm.newPassword
    });
    
    // 密码修改成功
    toast.success('密码已更新');
    
    // 清空表单
    changePasswordForm.currentPassword = '';
    changePasswordForm.newPassword = '';
    changePasswordForm.confirmPassword = '';
  } catch (error) {
    // 区分预期错误和意外错误
    if (error.isExpectedError) {
      // 用户友好的提示，如密码不匹配
      toast.error(error.message);
    } else {
      // 记录非预期错误到控制台
      console.error('修改密码过程中发生意外错误:', error);
      toast.error(error.message || '密码修改失败，请稍后再试');
    }
  } finally {
    // 无论成功或失败，都关闭修改密码窗口
    showChangePasswordModal.value = false;
  }
};

// 删除账户
const deleteAccount = () => {
  // 在实际应用中，这里应该有API请求
  userStore.logoutUser();
  toast.success('账户已删除');
  router.push('/login');
};
</script>

<style scoped>
/* 切换开关样式 */
.toggle-checkbox {
  left: 0;
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
  z-index: 1;
}
.toggle-checkbox.translate-x-full {
  transform: translateX(100%);
}
.toggle-label {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.toggle-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease-in-out;
}
.toggle-label:hover::before {
  left: 100%;
}

/* 渐变动画 */
.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 8s ease infinite;
}

@keyframes gradient-x {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 弹性缓动 */
.ease-spring {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 淡入上升动画 */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(15px);
  animation: fade-in-up 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 缩放进入动画 */
.animate-scale-in {
  animation: scale-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3D悬浮效果 */
.hover-3d {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hover-3d:hover {
  transform: rotateX(2deg) rotateY(2deg) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 按钮点击波纹效果 */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.btn-ripple:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(20) translate(-50%, -50%);
    opacity: 0;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #8153ff, #93dc24);
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #9673ff, #a3ec34);
}

/* 输入框焦点特效 */
input:focus {
  box-shadow: 0 0 0 2px rgba(129, 83, 255, 0.2);
  animation: input-pulse 2s infinite;
}

@keyframes input-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(129, 83, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(129, 83, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(129, 83, 255, 0);
  }
}

/* 模态框动画增强 */
@keyframes modal-bg-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style> 